/*
 * @Description: 描述信息
 * @Version: 版本号
 * @Author: xuebao
 * @Date: 2023-12-14 10:35:03
 * @LastEditors: xuebao
 * @LastEditTime: 2023-12-15 11:12:07
 */
import api from '@/api/orderApi'
import { Order } from '@/types/api'
import { IModalProp } from '@/types/modal'
import { message } from '@/utils/AntdGlobal'
import FormRender, { useForm } from 'form-render'
import { Modal, Form, Row, Col, Select, Input, DatePicker } from 'antd'

import { useEffect, useImperativeHandle, useState } from 'react'

export default function CreateOrder(props: IModalProp) {
  const form = useForm()
  const [visible, setVisible] = useState(false)
  const [cityList, setCityList] = useState<Order.DictItem[]>([])
  const [vehicleList, setVehicleList] = useState<Order.DictItem[]>([])

  useImperativeHandle(props.mRef, () => {
    return {
      open,
    }
  })
  //打开弹框
  const open = () => {
    setVisible(true)
  }
  //初始化城市列表&车型列表
  const getInitData = async () => {
    const cityList = await api.getCityList()
    const vehicleList = await api.getVehicleList()
    console.log(vehicleList)

    form.setSchema({
      cityName: {
        props: {
          options: cityList.map((item) => ({ label: item.name, value: item.name })),
        },
      },
      vehicleName: {
        props: {
          options: vehicleList.map((item) => ({ label: item.name, value: item.name })),
        },
      },
    })

    // setCityList(cityList)
    // setVehicleList(vehicleList)
    props.update() //更新父组件
  }
  //创建订单提交
  const handleOk = async () => {
    const valid = await form.validateFields()
    if (valid) {
      await api.createOrder(form.getValues())
      message.success('创建成功')
      handleCancel()
    }
  }
  //取消
  const handleCancel = () => {
    form.resetFields() //重置表单
    setVisible(false)
  }

  const schema = {
    type: 'object',
    displayType: 'row',
    labelWidth: 120,
    column: 2,
    properties: {
      cityName: {
        title: '城市名称',
        type: 'string',
        widget: 'select',
        placeholder: '请输入城市名称',
        required: true,
        rules: [{ required: true, message: '请选择城市名称' }],
      },
      vehicleName: {
        title: '车型',
        type: 'string',
        widget: 'select',
        required: true,
        placeholder: '请选择车型',
      },

      userName: {
        title: '用户名称',
        type: 'string',
        widget: 'input',
        placeholder: '请输入用户名称',
        required: true,
      },
      mobile: {
        title: '手机号',
        type: 'number',
        widget: 'inputNumber',
        placeholder: '请输入手机号',
        required: true,
        rules: [{ pattern: /^1[1-9]\d{9}$/, message: '请输入有效手机号' }],
      },
      startAddress: {
        title: '起始地址',
        type: 'string',
        widget: 'inputNumber',
        placeholder: '请输入起始地址',
      },
      endAddress: {
        title: '结束地址',
        type: 'string',
        widget: 'inputNumber',
        placeholder: '请输入结束地址',
      },
      orderAmount: {
        title: '下单金额',
        type: 'number',
        widget: 'inputNumber',
        placeholder: '请输入下单金额',
      },
      userPayAmount: {
        title: '支付金额',
        type: 'number',
        widget: 'inputNumber',
        placeholder: '请输入支付金额',
      },
      driverName: {
        title: '司机名称',
        type: 'string',
        widget: 'input',
        placeholder: '请输入司机名称',
        required: true,
      },
      driverAmount: {
        title: '司机名称',
        type: 'string',
        widget: 'input',
        placeholder: '请输入司机金额',
        required: true,
      },
      payType: {
        title: '支付方式',
        type: 'number',
        widget: 'select',
        placeholder: '请输入支付方式',
        required: true,
        props: {
          options: [
            { label: '微信支付', value: 1 },
            { label: '支付宝', value: 2 },
          ],
        },
      },
      state: {
        title: '订单状态',
        type: 'number',
        widget: 'select',
        placeholder: '请输入支付方式',
        required: true,
        props: {
          options: [
            { label: '进行中', value: 1 },
            { label: '已完成', value: 2 },
            { label: '超时', value: 3 },
            { label: '取消', value: 4 },
          ],
        },
      },
      useTime: {
        title: '用车时间',
        type: 'string',
        widget: 'datePicker',
      },
      endTime: {
        title: '结束时间',
        type: 'string',
        widget: 'datePicker',
      },
    },
  }
  return (
    <Modal
      title='创建订单'
      width={800}
      okText='确定'
      cancelText='取消'
      onOk={handleOk}
      onCancel={handleCancel}
      open={visible}
    >
      <FormRender form={form} schema={schema} maxWidth={360} footer={false} onMount={getInitData} />
    </Modal>
  )
}
